<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>投注记录 - 好运网</title>
</head>
<body>

<div th:fragment="bettingRecord">
    <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/center.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>

    <div class="as_fl20_right">
        <a name="records"></a>
        <div class="as_bet_zz">
            <div class="as_bet_zz_title">
                <h3>投注记录<b>| 每个产品的数据将有一定时间的延迟，仅供参考使用</b></h3>
                <ul class="shijin m40l m20t">
                    <a href="/bettingRecord/timeRange/1/#records">
                        <li th:attr="class=${session.recordTimeRange==1}? 'cover' : null">今天</li>
                    </a>
                    <a href="/bettingRecord/timeRange/3/#records">
                        <li th:attr="class=${session.recordTimeRange==3}? 'cover' : null">三天内</li>
                    </a>
                    <a href="/bettingRecord/timeRange/7/#records">
                        <li th:attr="class=${session.recordTimeRange==7}? 'cover' : null">一周内</li>
                    </a>
                    <a href="/bettingRecord/timeRange/30/#records">
                        <li th:attr="class=${session.recordTimeRange==30}? 'cover' : null">一个月内</li>
                    </a>
                    <a href="/bettingRecord/timeRange/365/#records">
                        <li th:attr="class=${session.recordTimeRange==365}? 'cover' : null">一年内</li>
                    </a>
                </ul>
            </div>
            <div class="as_bet_zz_table">
                <div>
                    <table class="mokl">
                        <tr>
                            <th class="w218">产品</th>
                            <th class="w120">笔数</th>
                            <th class="w120">投注流水</th>
                            <th class="w120">输赢</th>
                        </tr>
                    </table>
                    <table id="dataPage" class="mokl">
                        <tr th:each="item: ${recordData}">
                            <td class="w218" th:text="${item.gameName}"></td>
                            <td class="w120"><span class="blue" th:text="${item.betTimes}"></span></td>
                            <td class="w120" th:text="${item.betTotalAmount}"></td>
                            <td class="w120"><span class="green" th:text="${item.payout}"></span></td>
                        </tr>
                    </table>
                </div>
                <!--<div id="dataElem" style="text-align: center;"></div>-->
            </div>
        </div>
    </div>


    <!--<link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.js" charset="utf-8"></script>
    <script th:inline="javascript">
        var dataList = [[${recordData}]];
    </script>
    <script>
        //调用分页
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;

            laypage.render({
                elem: 'dataElem'
                , count: dataList.length
                , limit: 8
                , jump: function (obj) {
                    //模拟渲染
                    document.getElementById('dataPage').innerHTML = function () {
                        var arr = [],
                            thisData = dataList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function (index, item) {
                            arr.push('<td class="w218">' + item.gameName + '</td>' +
                                '<td class="w120">' + item.betTotalAmount + '</td>' +
                                '<td class="w120">' + item.payout + '</td>' +
                                '<td class="w120">' + item.betTimes + '</td>');
                        });
                        return arr.join('');
                    }();
                }
            });

        });

    </script>-->
</div>

</body>
</html>